<template>
  <div>
    <HeadTag :tagName="tagName" :curTag="curTag"></HeadTag>
    <el-divider></el-divider>
    <Table :tHead="tHead" :tBody="tBody" :tButton="tButton"></Table>
    <!-- 缴费记录 -->
    <el-dialog title="缴费记录" :visible.sync="monetDialogVisible" align="center">
      <el-table :data="moneyTable">
        <el-table-column property="p_money" label="缴费金额" align="center"></el-table-column>
        <el-table-column property="p_time" label="缴费时间" align="center"></el-table-column>
      </el-table>
      <el-pagination layout="prev, pager, next" :total="moneyPageInfo.total" :page-size="moneyPageInfo.pageSize" :current-page.sync="moneyPageInfo.currentPage" @current-change="handleCurrentChange" v-if="moneyData.length">
      </el-pagination>
    </el-dialog>

    <!-- 充值 -->
    <el-dialog title="充值" :visible.sync="addMoneyVisible" align="center">
      <el-form :model="addMoneyForm" :rules="addMoneyRules" ref="addMoneyRef" label-width="100px">
        <el-form-item label="充值金额" prop="p_money">
          <el-input v-model="addMoneyForm.p_money" placeholder="仅支持数值类型,单位(元)"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" align="center">
        <el-button @click="addMoneyVisible = false">取 消</el-button>
        <el-button type="primary" @click="addMoney">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>

export default {
  data () {
    return {
      //HeadTag属性
      tagName: [],
      curTag: '学生管理',
      //Table属性
      tHead: [
        {
          prop: 's_sno',
          label: '学号'
        },
        {
          prop: 's_name',
          label: '姓名'
        },
        {
          prop: 's_account',
          label: '账号'
        },
        {
          prop: 'd_number',
          label: '学生所属宿舍'
        },
        {
          prop: 'd_money',
          label: '宿舍水电费余额(元)'
        },
        {
          prop: 'd_status',
          label: '宿舍状态'
        }
      ],
      tBody: [],
      tButton: [
        {
          content: '查看缴费记录',
          type: 'primary',
          method: this.lookMoney
        },
        {
          content: '充值',
          type: 'success',
          method: this.showAddMoney
        },
      ],
      //缴费记录
      monetDialogVisible: false,
      moneyData: [],
      moneyPageInfo: {
        total: 10,
        pageSize: 5,
        currentPage: 1
      },
      moneyTable: [],
      // 充值
      addMoneyVisible: false,
      addMoneyForm: {
        p_money: '',
        p_student_id: '',
        p_time: ''
      },
      addMoneyRules: {
        p_money: [
          { required: true, message: '请输入充值金额', trigger: 'blur' },
        ],
      },

    }
  },
  methods: {
    //table操作
    showAddMoney (row) {
      this.addMoneyVisible = true
    },
    // 充值
    addMoney () {
      this.$refs.addMoneyRef.validate(async (valid) => {
        if (valid) {
          this.addMoneyForm.p_student_id = this.$store.state.userInfo.userId
          let a = new Date()
          let b = this.$formatDate(a)
          this.addMoneyForm.p_time = b
          const result = await this.$http.post('/studentAddMoney', this.addMoneyForm)
          if (result.status !== 200) return this.$message.error(result.message)
          this.getStudent()
          this.$message.success('充值成功!')
          this.addMoneyVisible = false
          this.addMoneyForm = {
            p_money: ''
          }
        }
      });
    },
    async lookMoney (row) {
      const result = await this.$http.post('/getStudentMoney', { s_id: row.s_id })
      if (result.status === 201) {
        this.monetDialogVisible = true
        this.moneyData = []
        this.moneyTable = []
        return
      }
      if (result.status !== 200) return this.$message.error('获取缴费记录信息失败!')
      this.moneyData = result.data
      this.moneyData.forEach((val) => {
        val.p_time = this.$formatDate(val.p_time)
      })
      this.moneyPageInfo.total = this.moneyData.length
      this.showMoneyTable()
      this.monetDialogVisible = true
    },

    //缴费分页渲染
    handleCurrentChange (val) {
      this.moneyPageInfo.currentPage = val
      this.showMoneyTable()
    },
    showMoneyTable () {
      let start = this.moneyPageInfo.pageSize * (this.moneyPageInfo.currentPage - 1)
      this.moneyTable = this.moneyData.filter((val, index) => {
        if (index >= start && index < this.moneyPageInfo.pageSize + start) {
          return val
        }
      })
    },
    //获取学生数据
    async getStudent () {
      const result = await this.$http.post('/getStudentOwn', { s_id: this.$store.state.userInfo.userId })
      if (result.status !== 200) return this.$message.error(result.message)
      result.data.forEach((val) => {
        if (val.d_status === 1) {
          val.d_status = '正常'
        } else {
          val.d_status = '催款中'
        }
      })
      this.tBody = result.data
    },
  },
  created () {
    this.$store.commit('addTag', { name: '学生管理', router: 'student' })
    this.tagName = this.$store.state.tagNames
    this.getStudent()

  },
};
</script>

<style scoped lang="less">
.el-select {
  width: 100%;
}
.el-select-dropdown {
  min-width: 0 !important;
  width: 200px;
}
.delete_p {
  text-align: center;
  font-size: 20px;
  font-weight: bold;
}
</style>
